﻿/*
[]
*/

Ext.namespace("tk","tk.yunos","tk.yunos.app");

tk.yunos.app.ImageViewer = function(fileDescriptor, config){
	var panel = new tk.yunos.app.ImageViewer.Panel(fileDescriptor, config);
	var winParams = {
		title: tk.yunos.app.ImageViewer.appname + '[' + fileDescriptor.address + ']',
		icon: fileDescriptor.icon,
		layout: 'fit',
		items: [
		    panel
		]
	};
	tk.yunos.system.GLOBAL_WINDOWMGR.newWindow(winParams).show();
};

tk.yunos.app.ImageViewer.Panel = function(fileDescriptor, config){
	var imageViewer = this;
	var img = document.createElement('img');
	img.alt = "加载图片失败";
	if(fileDescriptor){
		img.src = tk.yunos.filesystem.getBackendAddress(fileDescriptor.address);
	}
	var tableEl = document.createElement('table');
	tableEl.cellPadding = '0';
	tableEl.cellSpacing = '0';
	tableEl.width = "100%";
	var imgContainer = tableEl.insertRow(0).insertCell(0);
	imgContainer.className = "img-container";
	imgContainer.appendChild(img);
	
	var originImgSize = [0,0];
	
	var resizer = document.createElement('div');
	resizer.className = "resizer";
	
	var resizerSlider = new Ext.slider.SingleSlider({
		renderTo: resizer,
		width: 200,
		increment: 1,
		minValue: 0,
		maxValue: 100,
		listeners: {
			'change': function(slider, newValue){
				if(originImgSize[0] != 0 && originImgSize[1] != 0){
					var varyPercent = (newValue - 50)/50;
					img.style.width = originImgSize[0] + varyPercent*originImgSize[0] + 'px';
					img.style.height = originImgSize[1] + varyPercent*originImgSize[1] + 'px';
				}
			}
		}
	});
	
	var contentArea = new Ext.Panel({
		region: 'center',
		border: false,
		bodyStyle: 'overflow:auto',
		listeners: {
			'render': function(panel){
				if(imageViewer.getWindow && imageViewer.getWindow()){
					imageViewer.getWindow().wait();
				}
				panel.body.appendChild(resizer);
				//预先加载图片
				var preloadImg = new Image();
				preloadImg.src = tk.yunos.filesystem.getBackendAddress(fileDescriptor.address);
				if(preloadImg.complete){
					panel.body.appendChild(tableEl);
					originImgSize[0] = preloadImg.width;
					originImgSize[1] = preloadImg.height;
				}else{
					preloadImg.onload = function(){
						panel.body.appendChild(tableEl);
						originImgSize[0] = this.width;
						originImgSize[1] = this.height;
					};
					
					if(imageViewer.getWindow && imageViewer.getWindow()){
						imageViewer.getWindow().finish();
					}
				}
				panel.body.on('scroll', function(e){
					var scrollPos = panel.body.getScroll();
					var bodyHeight = panel.body.getHeight();
					var bodyWidth = panel.body.getWidth();
					resizer.style.top = (bodyHeight + scrollPos.top - 50) + 'px';
					resizer.style.left = ((bodyWidth - resizerSlider.getWidth())/2 + scrollPos.left) + 'px';
				});
				resizerSlider.setValue(50);
				
				if(imageViewer.getWindow && imageViewer.getWindow()){
					imageViewer.getWindow().finish();
				}
			},
			'resize': function(panel, bodyWidth, bodyHeight){
				var scrollPos = panel.body.getScroll();
				imgContainer.style.height = bodyHeight + 'px';
				resizer.style.top = (bodyHeight + scrollPos.top - 50) + 'px';
				resizer.style.left = ((bodyWidth - resizerSlider.getWidth())/2 + scrollPos.left) + 'px';
			}
		}
	});
	
	config = config || {};
	config.layout = 'border';
	config.items = [contentArea];
	
	Ext.apply(this, config);
	//调用父类构造方法
	tk.yunos.app.ImageViewer.Panel.superclass.constructor.call(this, config);
};

Ext.extend(tk.yunos.app.ImageViewer.Panel, Ext.Panel, {
	border: false
});

tk.yunos.app.ImageViewer.appname = '图片查看器';